<template>
  <div class="app-page">
    <!-- 头 -->
    <div class="app-header">
      <div class="app-title">
        <i :class="$route.meta.icon"></i> {{ $route.meta.title }}
      </div>
    </div>
    <div class="app-page-padding">
      <div class="app-section">
        <ul class="rs-background-size">
          <li class="cover">
            <h2>cover</h2>
            <p>将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。</p>
          </li>
          <li class="contain">
            <h2>contain</h2>
            <p>将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。</p>
          </li>
          <li class="length">
            <h2>length</h2>
            <p>自定义背景图像大小</p>
          </li>
        </ul>
      </div>
      <div class="app-section">
        <!-- bidirectional data binding（双向数据绑定） -->
        <codemirror v-model="code" :options="cmOptions"></codemirror>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'StyleButton',
  data () {
    return {
      code: `
// 背景尺寸
.rs-background-size {
  /*
<length>： 用长度值指定背景图像大小。不允许负值。
<percentage>： 用百分比指定背景图像大小。不允许负值。
auto： 背景图像的真实大小。
cover： 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。
*/
  .cover p {
    background-size: cover;
    background-position: center;
  }

  .contain p {
    background-size: contain;
  }
  .length p {
    background-size: 300px 150px;
  }
}
      `,
      cmOptions: {
        // codemirror options
        tabSize: 4,
        mode: 'sass',
        theme: 'darcula',
        lineNumbers: true,
        line: true
        // more codemirror options, 更多 codemirror 的高级配置...
      }
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
h1 {
  font-size: 20px;
}
h2 {
  font-size: 16px;
}
p {
  border: 10px dashed #666;
  width: 300px;
  height: 300px;
  padding: 20px;
  // background: url(images/bg03.jpg) no-repeat;
  background: url("~@/assets/bg03.jpg") no-repeat center center;
}

// 背景尺寸
.rs-background-size {
  /*
<length>： 用长度值指定背景图像大小。不允许负值。
<percentage>： 用百分比指定背景图像大小。不允许负值。
auto： 背景图像的真实大小。
cover： 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。
*/
  .cover p {
    background-size: cover;
    background-position: center;
  }

  .contain p {
    background-size: contain;
  }
  .length p {
    background-size: 300px 150px;
  }
}
</style>
